import Taro, { Component } from "@tarojs/taro";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtIcon,
  AtInput,
  AtTextarea
} from "taro-ui";
import { View, Picker, Button } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { onSubmitMission } from "../../actions/makePlan";
import "./addMissionModal.less";

@connect(
  state => state.makePlan,
  {
    onSubmitMission
  }
)
class AddMissionModal extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      missionName: "",
      missionDetails: "",
      startTime: "",
      endTime: ""
    };
  }

  onInputNameValue = (key, value) => {
    this.setState({
      [key]: value
    });
  };

  onInputDetail = e => {
    this.setState({
      missionDetails: e.target.value
    });
  };

  onPickTime = (key, v) => {
    this.setState({
      [key]: v
    });
  };

  render() {
    const endTimeArr = ["00:00"];
    this.props.submitedMission.forEach(el => {
      endTimeArr.push(el.endTime);
    });
    endTimeArr.sort();
    return (
      <AtModal
        className='add-mission-modal'
        isOpened
        closeOnClickOverlay={false}
      >
        <AtModalHeader>
          <AtIcon value='tags' size='30' color='#6190E8' />
          添加小任务
          <AtIcon value='tags' size='30' color='transparent' />
        </AtModalHeader>
        <AtModalContent>
          <AtInput
            autoFocus
            className='modal-input'
            title='任务名称：'
            placeholder='必填'
            value={this.state.missionName}
            onChange={v => {
              this.onInputNameValue("missionName", v);
            }}
          />
          <AtTextarea
            value={this.state.missionDetails}
            onChange={this.onInputDetail}
            maxLength={200}
            placeholder='任务细节是...'
          />
          <Picker
            mode='time'
            start={endTimeArr.pop()}
            end={this.state.endTime ? this.state.endTime : "23:59"}
            onChange={e => {
              this.onPickTime("startTime", e.detail.value);
            }}
          >
            {this.state.startTime ? (
              <View className='picker'>
                <View>任务开始时间：</View>
                <View>{this.state.startTime}</View>
              </View>
            ) : (
              <View className='picker'>
                <View>任务开始时间：</View>
                <View>请点击选择</View>
              </View>
            )}
          </Picker>
          <Picker
            mode='time'
            start={this.state.startTime ? this.state.startTime : "00:00"}
            end='23:59'
            onChange={e => {
              this.onPickTime("endTime", e.detail.value);
            }}
          >
            {this.state.endTime ? (
              <View className='picker'>
                <View>任务截止时间：</View>
                <View>{this.state.endTime}</View>
              </View>
            ) : (
              <View className='picker'>
                <View>任务截止时间：</View>
                <View>请点击选择</View>
              </View>
            )}
          </Picker>
        </AtModalContent>
        <AtModalAction>
          <Button
            onClick={() => {
              this.props.onSubmitMission();
              Taro.atMessage({
                message: "已取消",
                type: "warning",
                duration:3000
              });
            }}
          >
            取消
          </Button>
          <Button
            onClick={() => {
              Object.values(this.state).every(v => v !== "")
                ? this.props.onSubmitMission(this.state)
                : Taro.atMessage({
                    message: "信息未填写完全",
                    type: "error",
                    duration:3000
                  });
            }}
          >
            确定
          </Button>
        </AtModalAction>
      </AtModal>
    );
  }
}

export default AddMissionModal;
